<template>
  <div class="main_container">
    <el-row class="flex-height">
      <el-col :span="6">
        <div class="flex-height flex flex-column">
          <div class="flex-1 flex-column content-box1">
            <div class="flex-height flex-column align-center s-data-item">
              <div class="text-main font-16 pt-1">机构数量统计</div>
              <div ref="chartColumn" class=" flex-1" style="width:100%;height: 100%"></div>
            </div>
          </div>
          <div class="flex-1 flex-column mt-1 content-box1">
            <div class="flex-height flex-column align-center s-data-item">
              <div class="text-main font-16 pt-1">机构发布数</div>
              <div ref="chartColumn1" class=" flex-1" style="width:100%;height: 100%"></div>
            </div>
          </div>
          <div class="flex-1 flex-column mt-1 content-box1">
            <div class="flex-height flex-column align-center s-data-item">
              <div class="text-main font-16 pt-1">各地区上传资源</div>
              <div ref="chartColumn2" class=" flex-1" style="width:100%;height: 100%"></div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="flex-height flex flex-column px-1 center-box1">
          <div class="flex-1 flex-column">
            <div class="flex-height flex-column align-center s-data-item">
              <div class="text-main font-16 pt-1 pl-4 ml-2">近1年访问分析</div>
              <div ref="chartColumn6" class=" flex-1" style="width:100%;height: 100%"></div>
            </div>
          </div>
          <div class="flex-1 flex-column">
            <div class="flex-height flex-column align-center s-data-item">
              <div class=" flex-1" style="width:100%;height: 100%;overflow-y: auto">
                <el-table
                    :data="tableData" header-align="center"
                    style="width: 100%;height: 5rem;overflow: auto">
                  <el-table-column
                      prop="date" align="center"
                      label="时间"
                      width="180">
                  </el-table-column>
                  <el-table-column
                      prop="ip" align="center"
                      label="IP数"
                      width="180">
                  </el-table-column>
                  <el-table-column align="center"
                                   prop="view"
                                   label="浏览量">
                  </el-table-column>
                  <el-table-column align="center"
                                   prop="publish"
                                   label="发布量">
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
          <div class="flex-1 flex-column mt-1 content-box1" v-if="false">
            <div class="flex-height flex-column align-center s-data-item">
              <div class=" flex-1" style="width:100%;height: 100%;overflow-y: auto">

              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="flex-height flex flex-column">
          <div class="flex-1 flex-column content-box1">
            <div class="flex-height flex-column align-center s-data-item">
              <div class="text-main font-16 pt-1">科普资源类型统计</div>
              <div ref="chartColumn3" class=" flex-1" style="width:100%;height: 100%"></div>
            </div>
          </div>
          <div class="flex-1 flex-column mt-1 content-box1">
            <div class="flex-height flex-column align-center s-data-item">
              <div class="text-main font-16 pt-1">近1年资源发布数量曲线</div>
              <div ref="chartColumn4" class=" flex-1" style="width:100%;height: 100%"></div>
            </div>
          </div>
          <div class="flex-1 flex-column mt-1 content-box1">
            <div class="flex-height flex-column align-center s-data-item">
              <div class="text-main font-16 pt-1">近1月访问量热门TOP5</div>
              <div ref="chartColumn5" class="px-2 my-2 flex-1" style="width:100%;height: 100%;overflow-y: auto">
                <div class="flex-row align-center" v-for="(item,index) in data27">
                  <div class="font-18 bold text-white py-2 border-bottom">{{ index+1 }}</div>
                  <div class="px-2 width-80">
                    <div class="font-16 text-white text-hidden-line">{{item.title}}</div>
                    <div class="font-16 text-9 flex-row justify-between mt-05">
                      <span>{{item.time}}</span>
                    </div>
                  </div>
                  <div class="flex-row align-center">
                    <div class="border-radius-50" style="width: 6px;height: 6px;background: #19ECFF"></div>
                    <div class="font-16 text-main ml-2">{{item.value}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { FormItem } from 'element-ui'
export default {
  name: 'BigDatapage1',
  data () {
    return {
      data21:[],
      data22:[],
      data23:[],
      data26:[],
      data27:[],

      tabIndex: 0,
      currentDate: '',
      currentTime: '',
      tableData: [{
        date: '2024-02',
        ip: '23',
        view: '89',
        publish: '45',
      }, {
        date: '2024-01',
        ip: '11',
        view: '34',
        publish: '23',
      }, {
        date: '2023-12',
        ip: '5',
        view: '12',
        publish: '55',
      }, {
        date: '2023-11',
        ip: '4',
        view: '9',
        publish: '42',
      }, {
        date: '2023-10',
        ip: '3',
        view: '7',
        publish: '31',
      }]
    }
  },
  mounted () {
    // this.initChart()
    this.getStatis21()
    // this.initChart1()
    this.getStatis22()
    // this.initChart2()
    this.getStatis23()
    // this.initChart3()
    this.getStatis25()

    // this.initChart4()
    this.getStatis26()
    
    this.getStatis27()
    
    this.getStatis3567()
  },
  methods: {
    getdata(select,pageNo=1,rownumber=1000){
      return {
            "serviceName": select,
            "colNames": [
            "*"
            ],
            "condition": [],
            "relation_condition": {},
            "page": {
              "pageNo": pageNo,
              "rownumber": rownumber
            }
      }
    },
    getStatis3567(){
      let select = 'srvjk_cnt_zyst_ym_ana_select'
      this.$http.post(`/${select}?${select}`,this.getdata(select)).then(res => {
        if (res.data.state == 'SUCCESS') {
          this.tableData=res.data.data.map(item=>{
            return {
              date:item.calendar_year+'-'+item.calendar_month,
              ip:item.ipcnt,
              view:item.viewcnt,
              publish:item.release_cnt
          }})
          this.initChart6();
        }
      })
    },
    getStatis21(){
      let select = 'srvjk_organ_cnt_class_select'
      this.$http.post(`/${select}?${select}`,this.getdata(select)).then(res => {
        if (res.data.state == 'SUCCESS') {
          this.data21=res.data.data;
          this.initChart();
        }
      })
    },
    getStatis22(){
      let select = 'srvjk_cnt_zyst_jgfbs_select'
      this.$http.post(`/${select}?${select}`,this.getdata(select)).then(res => {
        if (res.data.state == 'SUCCESS') {
          this.data22=res.data.data;
          this.initChart1();
        }
      })
    },
    
    getStatis23(){
      let select = 'srvjk_cnt_pub_area_all_select'
      this.$http.post(`/${select}?${select}`,this.getdata(select)).then(res => {
        if (res.data.state == 'SUCCESS') {
          this.data23=res.data.data;
          this.initChart2();
        }
      })
    },    
    getStatis25(){
      let select = 'srvjk_cnt_zyst_kpzl_select'
      this.$http.post(`/${select}?${select}`,this.getdata(select)).then(res => {
        if (res.data.state == 'SUCCESS') {
          this.data25=res.data.data;
          this.initChart3();
        }
      })
    },
    
    getStatis26(){
      let select = 'srvjk_cnt_zyst_ym_select'
      let currentDate = new Date();
      let oneYearAgo = new Date();
      oneYearAgo.setFullYear(currentDate.getFullYear() - 1);
      let formatDateString = (date) => {
      let year = date.getFullYear();
      let month = String(date.getMonth() + 1).padStart(2, "0");
      let day = String(date.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
      };
      let lastYear=formatDateString(oneYearAgo)
      var reg = new RegExp("-", "g"); // 'g' 表示全局匹配
      var result = lastYear.replace(reg, ""); // 删除所有的 'a'
      lastYear = result.slice(0,6)

      this.$http.post(`/${select}?${select}`,this.getdata(select)).then(res => {
        if (res.data.state == 'SUCCESS') {
          this.data26=res.data.data.filter(item=>parseInt(item.release_ym)>=parseInt(lastYear))
          this.initChart4();
        }
      })
    },
    
    getStatis27(){
      let select = 'srvjk_cnt_zyst_top5_select'
      this.$http.post(`/${select}?${select}`,this.getdata(select,1,3)).then(res => {
        if (res.data.state == 'SUCCESS') {
          this.data27=res.data.data.map(item=>({
            time:item.release_time,
            title:item.title_name,
            uuid:item.uid,
            value:item.view_cnt
          }))
        }
      })
    },
    
    initChart () {
      this.chartColumn = this.$echarts.init(this.$refs.chartColumn)
      var scale = 1
      function _pie2 () {
        const dataArr = []
        for (var i = 0; i < 4; i++) {
          if (i % 2 === 0) {
            dataArr.push({
              name: (i + 1).toString(),
              value: 25,
              itemStyle: {
                normal: {
                  // color: 'rgba(88,142,197,0.5)',
                }
              }
            })
          } else {
            dataArr.push({
              name: (i + 1).toString(),
              value: 20,
              itemStyle: {
                normal: {
                  color: 'rgba(0,0,0,0)'
                }
              }
            })
          }
        }
        return dataArr
      }
      //var echartData = [{ value: 2154, name: '医院' }, { value: 3854, name: '公共场所'  }, { value: 3515, name: '其他'  }]
      this.data21=this.data21.map(item=>({name:item.classification,value:item.class_cnt}))
      var echartData =this.data21
      var totalDatas = 0
      for (var i = 0; i < echartData.length; i++) {
        totalDatas += echartData[i].value
      }

      var rich = {
        yellow: {
          color: '#ffc72b',
          fontSize: 15 * scale,
          // padding: [21, 0],
          align: 'center'
        },
        total: {
          color: '#ffc72b',
          fontSize: 40 * scale,
          align: 'center'
        },

        blue: {
          color: '#49dff0',
          fontSize: 16 * scale,
          align: 'center'
        },
        hr: {
          borderColor: '#0b5263',
          width: '100%',
          borderWidth: 1,
          height: 0
        }
      }
      var option = {
        backgroundColor: 'transparent',
        title: {
          // text: '总数',
          // subtext: total_datas,
          textStyle: {
            color: '#f2f2f2',
            fontSize: 40,
            align: 'center'
          },
          subtextStyle: {
            fontSize: 30,
            color: ['#ff9d19']
          },
          x: 'center',
          y: 'center'
        },
        legend: {
          // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） | 'vertical'（垂直）
          orient: 'vertical',
          // x 设置水平安放位置，默认全图居中，可选值：'center' | 'left' | 'right' | {number}（x坐标，单位px）
          x: 'left',
          // y 设置垂直安放位置，默认全图顶端，可选值：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
          y: 'center',
          itemWidth: 10, // 设置图例图形的宽
          itemHeight: 10, // 设置图例图形的高
          textStyle: {
            fontSize: 12,
            color: '#fff' // 图例文字颜色
          },
          // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
          itemGap: 30,
          // data: ['医院', '公共场所', '其他']
          data: this.data21.map(item=>item.name)
        },

        series: [{
          name: '总考生数量',
          type: 'pie',
          itemStyle: {
            normal: {
              borderWidth: 5,
              borderColor: '#030d22'
            }
          },
          radius: ['38%', '50%'],
          hoverAnimation: false,
          color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
          label: {
            normal: {
              formatter: function (params, ticket, callback) {
                var total = 0 // 考生总数量
                var percent = 0 // 考生占比
                echartData.forEach(function (value, index, array) {
                  total += value.value
                })
                percent = ((params.value / total) * 100).toFixed(1)
                return '{yellow|' + params.value + '}\n{blue|' + percent + '%}'
              },
              rich: rich
            }
          },
          data: echartData
        },
        {
          type: 'pie',
          zlevel: 2,
          silent: true,
          center: ['50%', '50%'],
          radius: ['58%', '55%'],
          startAngle: 50,
          hoverAnimation: false,
          color: [{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: '#6F48F0'
            }, {
              offset: 1,
              color: 'rgba(111, 70, 240, 0.01)'
            }],
            global: false
          }],
          label: {
            normal: {
              show: false
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: _pie2()
        },
        {
          type: 'pie',
          radius: ['35%', '36%'],
          data: [100],
          label: {
            show: false
          },
          color: '#121F22'
        }
        ]
      }
      this.chartColumn.setOption(option)
    },
    initChart1 () {
      this.chartColumn1 = this.$echarts.init(this.$refs.chartColumn1)
      this.data22=this.data22.map((item)=>({name:item.classification,value:item.cnt}))
      const option = {
        backgroundColor: 'transparent',
        grid: {
          top: '15%',
          right: '5%',
          left: '15%',
          bottom: '18%'
        },
        xAxis: [{
          type: 'category',
          color: '#59588D',
          //data: ['商洛市', '渭南市', '咸阳市', '榆林市', '商洛市', '铜川市', '宝鸡市', '延安市', '汉中市', '安康市'],
          data: this.data22.map(item=>item.name),
          axisPointer: {
            type: 'line'
          },
          axisLine: {
            lineStyle: {
              color: '#272456'
            }
          },
          axisLabel: {
            margin: 20,
            color: '#f3f2f8',
            textStyle: {
              fontSize: 12
            }
          }
        }],
        yAxis: [{
          min: 0,
          max: 'dataMax',
          axisLabel: {

            color: '#f3f2f8'
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: '#272456'
            }
          }
        }],
        series: [{
          type: 'bar',
          // data: [100, 90, 10, 90, 90, 20, 56, 89, 56, 89],
          data:this.data22.map(item=>item.value),
          barWidth: '14px',
          itemStyle: {
            normal: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#6F48F0' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#BC6FD6' // 100% 处的颜色
              }], false),
              barBorderRadius: [30, 30, 0, 0],
              shadowColor: 'rgba(0,255,225,1)',
              shadowBlur: 4
            }
          },
          label: {
            normal: {
                // show: true,
                // lineHeight: 30,
                // width: 80,
                // height: 30,
                // backgroundColor: '#252453',
                // borderRadius: 200,
                // position: ['-8', '-60'],
                // distance: 1,
                // formatter: [
                //     '    {d|●}',
                //     ' {a|{c}%}     \n',
                //     '    {b|}'
                // ].join(''),
                // rich: {
                //     d: {
                //         color: '#3CDDCF',
                //     },
                //     a: {
                //         color: '#fff',
                //         align: 'center',
                //     },
                //     b: {
                //         width: 1,
                //         height: 30,
                //         borderWidth: 1,
                //         borderColor: '#234e6c',
                //         align: 'left'
                //     },
                // }
            }
          }
        }]
      }
      this.chartColumn1.setOption(option)
    },
    initChart2 () {
      this.chartColumn2 = this.$echarts.init(this.$refs.chartColumn2)
      this.data23=this.data23.map(item=>({name:item.area_city,value:item.cnt}))
      const option = {
        backgroundColor: 'transparent',
        grid: {
          top: '15%',
          right: '5%',
          left: '15%',
          bottom: '18%'
        },
        xAxis: [{
          type: 'category',
          color: '#59588D',
          //data: ['商洛市', '渭南市', '咸阳市', '榆林市', '商洛市', '铜川市', '宝鸡市', '延安市', '汉中市', '安康市'],
          data: this.data23.map(item=>item.name),
          axisPointer: {
            type: 'line'
          },
          axisLine: {
            lineStyle: {
              color: '#272456'
            }
          },
          axisLabel: {
            margin: 20,
            color: '#f3f2f8',
            textStyle: {
              fontSize: 12
            }
          }
        }],
        yAxis: [{
          min: 0,
          max: 'dataMax',
          axisLabel: {

            color: '#f3f2f8'
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: '#272456'
            }
          }
        }],
        series: [{
          type: 'bar',
          // data: [100, 90, 10, 90, 90, 20, 56, 89, 56, 89],
          data:this.data23.map(item=>item.value),
          barWidth: '14px',
          itemStyle: {
            normal: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#6F48F0' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#BC6FD6' // 100% 处的颜色
              }], false),
              barBorderRadius: [30, 30, 0, 0],
              shadowColor: 'rgba(0,255,225,1)',
              shadowBlur: 4
            }
          },
          label: {
            normal: {
                // show: true,
                // lineHeight: 30,
                // width: 80,
                // height: 30,
                // backgroundColor: '#252453',
                // borderRadius: 200,
                // position: ['-8', '-60'],
                // distance: 1,
                // formatter: [
                //     '    {d|●}',
                //     ' {a|{c}%}     \n',
                //     '    {b|}'
                // ].join(''),
                // rich: {
                //     d: {
                //         color: '#3CDDCF',
                //     },
                //     a: {
                //         color: '#fff',
                //         align: 'center',
                //     },
                //     b: {
                //         width: 1,
                //         height: 30,
                //         borderWidth: 1,
                //         borderColor: '#234e6c',
                //         align: 'left'
                //     },
                // }
            }
          }
        }]
      }
      this.chartColumn2.setOption(option)
    },
    initChart3 () {
      this.data25=this.data25.map(item=>({name:item.classify_name,value:item.classify_cnt}))
      this.chartColumn3 = this.$echarts.init(this.$refs.chartColumn3)
      var img = ''

      //var trafficWay = [{ name: '课件', value: 20 }, { name: '海报', value: 10 }, { name: '折页', value: 30 }, { name: '展览', value: 44 }]
      var trafficWay=this.data25
      var data = []
      var color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
      for (var i = 0; i < trafficWay.length; i++) {
        data.push({
          value: trafficWay[i].value,
          name: trafficWay[i].name,
          itemStyle: {
            normal: {
              borderWidth: 5,
              shadowBlur: 20,
              borderColor: color[i],
              shadowColor: color[i]
            }
          }
        }, {
          value: 2,
          name: '',
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              color: 'rgba(0, 0, 0, 0)',
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0
            }
          }
        })
      }
      var seriesOption = [{
        name: '',
        type: 'pie',
        clockWise: false,
        radius: [85, 69],
        hoverAnimation: false,
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'outside',
              color: '#ddd',
              formatter: function (params) {
                // var percent = 0
                // var total = 0
                // for (var i = 0; i < trafficWay.length; i++) {
                //   total += trafficWay[i].value
                // }
                // percent = ((params.value / total) * 100).toFixed(0)
                if (params.name !== '') {
                  return params.name + '：' + params.value
                } else {
                  return ''
                }
              }
            },
            labelLine: {
              length: 1,
              length2: 45,
              show: true,
              color: '#00ffff'
            }
          }
        },
        data: data
      }]
      const option = {
        backgroundColor: 'transparent',
        color: color,
        graphic: {
          elements: [{
            type: 'image',
            z: 3,
            style: {
              image: img,
              width: 108,
              height: 108
            },
            left: 'center',
            top: 'center',
            position: [100, 100]
          }]
        },
        grid: {
          left: '8%',
          top: '18%',
          right: '5%',
          bottom: '22%'
        },
        tooltip: {
          show: false
        },
        toolbox: {
          show: false
        },
        series: seriesOption
      }
      this.chartColumn3.setOption(option)
    },
    initChart4 () {
      function insertCharacter(str, char, index) {
        return str.slice(0, index) + char + str.slice(index);}
      this.data26=this.data26.map(item=>{
        let name = insertCharacter(item.release_ym,'-',4)
        let value = item.cnt
        return {name, value}
      })
      this.chartColumn4 = this.$echarts.init(this.$refs.chartColumn4)
      const option = {
        backgroundColor: 'transparent',
        title: {
          textStyle: {
            color: '#6a9cd5'
          },
          text: '',
          left: 'center'
        },
        tooltip: { // 鼠标悬浮弹出提示框
          trigger: 'axis', // 提示框弹出的触发时间，折线图和柱状图为axis
          formatter: '{a} <br/>{b} : {c} '// 提示框提示的信息，{a}series内的名字，{b}为块状的名字，{c}为数值
        },
        grid: { // 统计图距离边缘的距离
          top: '20%',
          left: '15%',
          right: '10%',
          bottom: '12%'
        },
        legend: {
          show: true,
          icon: 'circle',
          top: 20,
          textStyle: {
            fontSize: 12,
            color: '#fff'
          }
        },
        xAxis: [{ // x轴
          type: 'category', // 数据类型为不连续数据
          boundaryGap: false, // 坐标轴两边是否留白
          axisLine: { // 坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: '#233e64' // x轴颜色
            }
          },
          axisLabel: { // 坐标轴刻度标签的相关设置
            textStyle: {
              color: '#fff'
            }
          },
          axisTick: { show: true }, // 刻度点数轴
          //data: ['2023/1/1', '2023/1/1', '2023/1/1', '2023/1/1', '2023/1/1', '2023/1/1', '2023/1/1'],
          data: this.data26.map(item=>item.name)
        }],
        yAxis: [{ // y轴的相关设置
          type: 'value', // y轴数据类型为连续的数据
          min: 0, // y轴上的刻度最小值
          max: 'dataMax', // y轴上的刻度最大值
          splitNumber: 7, // y轴上的刻度段数
          splitLine: { // y轴上的y轴线条相关设置
            show: true,
            lineStyle: {
              color: '#233e64'
            }
          },
          axisLine: { // y轴的相关设置
            show: true,
            lineStyle: {
              color: '#233e64' // y轴颜色
            }
          },
          axisLabel: { // y轴的标签相关设置
            textStyle: {
              color: '#fff'
            }
          },
          axisTick: { show: true } // 刻度点数轴
        }],
        series: [{
          name: '发布数',
          type: 'line', // 统计图类型为折线图
          smooth: true, // 是否平滑曲线显示
          symbolSize: 0, // 数据点的大小，[0,0]//b表示宽度和高度
          lineStyle: { // 线条的相关设置
            normal: {
              color: '#851AEE' // 线条颜色
            }
          },
          areaStyle: { // 区域填充样式
            normal: {
              // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(133,26,138, 0.9)' },
                { offset: 0.7, color: 'rgba(133,26,138, 0)' }
              ], false),

              shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
              shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            }
          },
          // data: [90, 105, 84, 125, 110, 92, 98]
          data:this.data26.map(item=>item.value)
        }]
      }
      this.chartColumn4.setOption(option)
    },
    initChart6 () {
      this.chartColumn6 = this.$echarts.init(this.$refs.chartColumn6)
      const option = {
        background: 'transparent',
        color: ['#FF698C', '#00FFBF', '#FFB400', '#1F8CF8', '#CA89FB'],
        title: {
          text: '',
          x: 'center',
          top: '10%',
          textStyle: { color: '#2D527C', fontSize: '16', fontWeight: 'bold' }
        },
        legend: {
          show: true,
          icon: 'circle',
          top: 20,
          textStyle: {
            fontSize: 12,
            color: '#c8c8c8'
          }
        },
        grid: {
          left: '3%',
          right: '3%',
          top: '10%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }, // cross 十字准星指示器 / shadow 阴影指示器
          backgroundColor: 'rgba(255, 255, 255, 0.8)',
          formatter: (params) => {
            let Htm = `<span>${params[0].name}</span><br>`
            params.forEach((item, index) => {
              const { marker, seriesName, value } = item
              Htm += `${marker}
        <span style="display:inline-block;margin-right:4px;width:70px;height:18px;line-height:24px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${seriesName}</span>
        <span style="display:inline-block;margin-right:12px;">${String(value) == 'NaN' ? '-' : value}</span>
        ${(index + 1) % 2 === 0 ? '<br>' : ''}`
            })
            return Htm
          }
        },
        xAxis: {
          axisTick: { show: false },
          axisLabel: {
            textStyle: { color: '#fff', fontSize: 14 }
          },
          axisLine: {
            // onZero: false, // X轴脱离Y轴0刻度
            lineStyle: { color: '#fff', type: 'dashed' }
          },
          // data: ['2023/11/1', '2023/10/1', '2023/9/1', '2023/8/1', '2023/7/1']
          data: this.tableData.map(item=>item.date)
        },
        yAxis: [{
          axisLabel: {

            color: '#fff'
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: '#272456'
            }
          }
        }],
        series: [
          {
            name: 'IP',
            type: 'line',
            symbolSize: 14,
            data: this.tableData.map(item=>item.ip)
          },
          {
            name: '浏览量',
            type: 'line',
            symbolSize: 14,
            data: this.tableData.map(item=>item.view)
          },
          {
            name: '发布量',
            type: 'line',
            symbolSize: 14,
            data: this.tableData.map(item=>item.publish)
          },
        ]
      }
      this.chartColumn6.setOption(option)
    },
    get5Months(){
      var monthArr = [];
      var data = new Date();
      var year = data.getFullYear();
      data.setMonth(data.getMonth() + 1, 1); //获取到当前月份,设置月份
      for (var i = 0; i < 5; i++) {
        data.setMonth(data.getMonth() - 1); //每次循环一次 月份值减1
        var m = data.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        monthArr.push(data.getFullYear() + "-" + m);
      }
     return monthArr;
    },
  }
}
</script>

<style scoped>
@import "../../../assets/scss/pages/data.scss";
.text-main{
  color: #00D8FF;
}
.main_container {
  height:100%;
}
.el-col{
  height: 100%;
}
.content-box1{
  background: url("../../../assets/img/bigData/left-bg.png");
  background-size: 100% 100%;
}
.center-box1{
  margin-left:10px;
  margin-right:10px;
  width: calc(100% - 20px);
  background: url("../../../assets/img/bigData/center_bg.png");
  background-size: 100% 100%;
}
/deep/.el-table, /deep/.el-table th, /deep/.el-table tr, /deep/.el-table--enable-row-hover .el-table__body tr:hover>td{
  background: transparent !important;
}
/deep/.el-table th.is-leaf, /deep/.el-table td{
  border: none !important;
}
/deep/.el-table{
  color: #fff !important;
}
/deep/.el-table thead{
  color: #00FFF0 !important;
}
/deep/.el-table::before {
  background-color: transparent !important;
}
</style>
